import React, { useEffect, useState, CSSProperties, useRef } from 'react'
import { useHistory } from 'react-router-dom'
import { LeftOutline, EyeOutline } from 'antd-mobile-icons'
import { getGoodsList, getAllGoodsList } from '../../api/Home'
import { List, InfiniteScroll } from 'antd-mobile'
import type { GoodsListData } from '../../types/home'
import { UseSearch } from '../../hooks/useCartMethod'
import '../../App.less/List.less'
import {
    List as VirtualizedList,
    AutoSizer,
    WindowScroller,
} from 'react-virtualized'

export default function useSearch() {
    const [searchList, setList] = useState<GoodsListData[]>([] as GoodsListData[])
    const history = useHistory()
    const getDatas = async () => {
        const res = await getAllGoodsList()
        setList(res.data)
    }
    let inputData
    const rowCount = searchList.length
    const inputRef = useRef(null as any)
    //虚拟长列表项
    const rowRenderer = ({
        index,
        key,
        style,
    }: {
        index: number
        key: string
        style: CSSProperties
    }) => {
        const item = searchList[index]
        if (!item) return
        return (
            <div className="product-item" key={key} style={style}>
                <img src={item.img1} />
                <div className="product-info">
                    <p className="name">{item.desc}</p>
                    <p className="subtitle">{item.proname}</p>
                    <span className="price">￥ {item.originprice}</span>
                </div>
            </div>
        )
    }
    const getSearch = (e: any) => {
        e.preventDefault()
        console.log(UseSearch(inputRef.current.value));
        setList([...UseSearch(inputRef.current.value)]);
        inputRef.current.value = ''
    }
    useEffect(() => {
        getDatas()
    }, [])
    return (
        <div>
            <form className="product-list-content">
                <header className="category-header wrap">

                    <i className="nbicon nbfanhui" onClick={() => history.goBack()}><LeftOutline /></i>
                    <div className="header-search">
                        <i className="nbicon nbSearch"><EyeOutline /></i>
                        <input
                            name="search"
                            autoComplete='on'
                            type="text"
                            ref={inputRef}
                            className="search-title"
                            v-model="state.keyword" />
                    </div>
                    <button className="search-btn" onClick={getSearch} type={'submit'} >搜索</button>
                </header>
            </form >

            <WindowScroller
                onScroll={({ scrollTop }) => {
                    console.log('scrollTop', scrollTop)
                }}
            >
                {({ height, scrollTop, isScrolling }) => (
                    <div className="content">
                        <div className={'product-list-refresh'}>
                            <List>
                                <AutoSizer disableHeight>
                                    {({ width }: { width: number }) => (
                                        <VirtualizedList
                                            autoHeight
                                            rowCount={rowCount}
                                            rowRenderer={rowRenderer}
                                            width={width}
                                            height={height}
                                            rowHeight={120}
                                            overscanRowCount={6}
                                            isScrolling={isScrolling}
                                            scrollTop={scrollTop}
                                        />
                                    )}
                                </AutoSizer>
                            </List>
                        </div>
                    </div>
                )
                }
            </WindowScroller>
            {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
        </div >
    )
}
